<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>左侧导航栏</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <link rel="stylesheet" type="text/css" href="css/page.css" />

    <link rel="stylesheet" href="https://lib.sinaapp.com/js/bootstrap/4.2.1/css/bootstrap.min.css">

    <link href="plugins/css/icons.min.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div class="page" id="app">
    <div class="nav-left">
        <div class="navDiv">
            <div class="nav-list">
                <ul>
                    <li class="nav-tab a_active waves-effect">
                        <a href="html/home.html" class="li-a active" target="iframe"><i class='bx bx-home-smile'></i> 我的主页
                            <span class="badge badge-pill badge-primary float-right">3</span>
                        </a>
                    </li>
                    <!-- <li class="nav-tab">
                        <a href="#" class="li-a"><i class='bx bx-home-smile'></i> 设备管理</a>
                    </li> -->
                    <li class="nav-tab nav-ul">
                        <a href="javascript:void[0]" class="li-a" target="iframe"><i class='bx bx-layer'></i> 信息设置
                            <i class='bx bx-chevron-right' style="float: right;"></i></a>
                        <div class="nav-box">
                            <a href="html/device/1.html" class="li-a-a" target="iframe">基本信息设置</a>
                            <a href="html/device/3.html" class="li-a-a" target="iframe">修改密码</a>

                        </div>
                    </li>
                    <li class="nav-tab nav-ul">
                        <a href="javascript:void[0]" class="li-a"><i class='bx bx-buildings'></i> 我的简历
                            <i class='bx bx-chevron-right' style="float: right;"></i></a>
                        <div class="nav-box">
                            <a href="html/device/6.html" class="li-a-a" target="iframe">我的简历</a>
                            <a href="html/device/7.html" class="li-a-a" target="iframe">修改简历</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="nav-right">
        <div class="content-page">
            <iframe name="iframe" width="100%" height="100%" frameborder="0"
                    src="html/home.html"></iframe>
        </div>
    </div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        let navflag = false;
        $('.nav-tab').click(function() {
            $(this).siblings().each(function() {
                $(this).removeClass('a_active');
                // $(this).removeClass('a_active');
                $(this).find('.nav-box').css('height', '0')
                //关闭右侧箭头
                if ($(this).attr('class').indexOf('nav-ul') != -1) {
                    $(this).find('.bx-chevron-right').css('transform', 'rotateZ(0deg)')
                    $(this).find('.bx-chevron-right').css('transition', 'all .5s')
                    $(this).removeClass('nav-show')
                    // $(this).find('div').removeClass('nav-box')
                }
            })
            //当前选中
            $(this).addClass('a_active')
            $(this).find('.li-a').addClass('active')
            // 打开右侧箭头
            $(this).find('.bx-chevron-right').css('transform', 'rotateZ(90deg)')
            $(this).find('.bx-chevron-right').css('transition', 'all .5s')
            $(this).addClass('nav-show')
            // $(this).find('div').addClass('nav-box')
        })
        /* 二级菜单a点击事件 */
        $(".li-a-a").click(function() {
            $(".li-a-a").each(function() {
                $(this).removeClass('active-li-a');
            })
            $(this).addClass('active-li-a');
        })
    })
    // const vue = new Vue({
    // 	el:'#app',
    // 	data:{

    // 	},
    // 	methods:{
    // 		liCli(){

    // 		}
    // 	}
    // })
</script>
</body>
</html>
